<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/cookie.js"></script>
</head>
<body>
    <div>
        <h3> PHP+Mysql 实现注册  </h3>
        <div class="form">
            <div>
                <label for="user">用户名</label>
                <input type="text" id="user"  placeholder="请输入用户名">
                <span class="error-text usererr" id="usererr"></span>
            </div>
            <div>
                <label for="phone">手机号码</label>
                <input type="text" id="phone" placeholder="请输入手机号码">
                <span class="error-text phoneerr"></span>
            </div>
            <div>
                <label for="email">邮箱</label>
                <input type="text" id="email" placeholder="请输入邮箱">
                <span class="error-text emailerr"></span>
            </div>
            <div>
                <label for="pass">密码</label>
                <input type="password" id="pass" placeholder="请输入密码">
            </div>
            <div>
                <button id="savebtn" >注册</button>
            </div>
        </div>
    </div>


    <script>
        // 1 cookie 当做服务器  实现简单的cookie 增删改查   
        // 模拟一下 注册和登录 

        // 单用户注册   一台浏览器只能注册一个用户  后面注册会把之前注册的给覆盖掉 
        // 注册  只是把数据存储到 cookie  (cookie 存储)
        // 登录  用户输入用户名和密码 去cookie 里面匹配对应的用户名和密码
        
        // 如果一致   登录成功
        // 如果不一样  就登录失败  用户名或者密码错误 


        // 晚上  作业 实现多用户注册  + 登录 
        // 多用户注册   只有用户名 user 不一样就可以重复插入  

        var userInp = document.getElementById("user")
        var phoneInp = document.getElementById("phone")
        var passInp = document.getElementById("pass")
        var emailInp = document.getElementById("email")
        var savebtn = document.getElementById("savebtn")

        user.onblur = function(){
            var user = userInp.value;
            console.log(user)
            // 请求ajax 
            var xhr = new XMLHttpRequest(); 
            xhr.open("get","../php/isExistUser.php?user="+user,true);
            xhr.send();   // 带参数 
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4 && xhr.status ==200){
                    var result = JSON.parse(xhr.responseText);
                    console.log(result)
                    const {status,detail} = result;
                    var userErr = document.getElementsByClassName('usererr')[0];

                    if(status){
                        userErr.style.color = "green";
                        userErr.innerHTML = `√ ${detail} `;
                    }else{
                        userErr.style.color = "red";
                        userErr.innerHTML = `x ${detail}`;
                        // alert(detail)
                    }
                }
            }
        }

        phone.onblur = function(){
            var phone = phoneInp.value;
            console.log(phone)
            // 请求ajax 
            var xhr = new XMLHttpRequest(); 
            xhr.open("get","../php/isExistPhone.php?phone="+phone,true);
            xhr.send();   // 带参数 
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4 && xhr.status ==200){
                    var result = JSON.parse(xhr.responseText);
                    console.log(result)
                    const {status,detail} = result;
                    var phoneerr = document.getElementsByClassName('phoneerr')[0];

                    if(status){
                        phoneerr.style.color = "green";
                        phoneerr.innerHTML = `√ ${detail} `;
                    }else{
                        phoneerr.style.color = "red";
                        phoneerr.innerHTML = `x ${detail}`;
                        // alert(detail)
                    }
                }
            }
        }


        email.onblur = function(){
            var email = emailInp.value;
            console.log(email)
            // 请求ajax 
            var xhr = new XMLHttpRequest(); 
            xhr.open("get","../php/isExistEmail.php?email="+email,true);
            xhr.send();   // 带参数 
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4 && xhr.status ==200){
                    var result = JSON.parse(xhr.responseText);
                    console.log(result)
                    const {status,detail} = result;
                    var emailerr = document.getElementsByClassName('emailerr')[0];

                    if(status){
                        emailerr.style.color = "green";
                        emailerr.innerHTML = `√ ${detail} `;
                    }else{
                        emailerr.style.color = "red";
                        emailerr.innerHTML = `x ${detail}`;
                        // alert(detail)
                    }
                }
            }
        }
        
        savebtn.onclick = function(){
            var user = userInp.value
            var phone = phoneInp.value
            var pass  = passInp.value 
            var email = emailInp.value 

            // 正则   
            if(user&&phone&&pass&&email){
               // ajax 发送数据到服务器  
               var xhr = new XMLHttpRequest(); 
               xhr.open("post","../php/register.php",true);
               xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");   // 设置请求头的数据类型 
               xhr.send(`user=${user}&pass=${pass}&phone=${phone}&email=${email}`);   // 带参数 
               xhr.onreadystatechange = function(){
                   if(xhr.readyState==4 && xhr.status ==200){
                       console.log(xhr.responseText)
                       var result = JSON.parse(xhr.responseText);
                       const {status,detail} = result;
                       if(status){
                            userInp.value = "";
                            phoneInp.value = ""
                            passInp.value  = ""
                            emailInp.value  = ""
                            location.href = "./login_account.html";
                       }else{
                           alert(detail)
                       }
                   }
               }
                 
            }else{
                alert("请先完成所有的信息填写 ")
            }
        }

        
        // 周末作业 (PHP+MYSQL)
        // 1. 完成登录  
        // 2. 进入主页 
        // 3. 主页实现 成绩表格的操作  (添加 删除  修改 查询  grade )
        // UI 自己设计 
        // 4. 商品列表  附加  (商品 添加 删除  修改 查询 ) 
    </script>
</body>
</html>